<template>
  <div>
    <!-- 头部搜索 -->
    <el-form :inline="true" :model="tableDataS" class="demo-form-inline" ref="tableDataS">
      <el-form-item label="课程名称:" prop="courseName" >
        <el-input v-model="tableDataS.courseName" placeholder="课程名称:" clearable="true"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(tableDataS)">查询</el-button>
        <el-button @click="resetForm('tableDataS')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border >
      <el-table-column prop="kid" label="序号" width="100px"></el-table-column>

      <el-table-column prop="courseImage" label="图片"   >
        <!--加入下面的内容,scope.row代表这一行,img是显示这一行的哪个字段,我的是img,你的自己看下-->
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" style="width: 100px;height: 50px">
        </template>
      </el-table-column>

      <el-table-column prop="courseName" label="课程名称" width="180"></el-table-column>
      <el-table-column prop="courseType.ctName" label="课程分类"></el-table-column>
      <el-table-column prop="coursePrice,courseVprice" label="价格">
        <template slot-scope="scope">
          <span v-if="scope.row.coursePrice==0">非会员免费</span>
          <span v-else>非会员价:{{scope.row.coursePrice}}<br></span>
          <span v-if="scope.row.courseVprice==0">会员免费</span>
          <span v-else>会员价:{{scope.row.courseVprice}}<br></span>
        </template>
      </el-table-column>
      <el-table-column prop="courseType.ctSort" label="排序"></el-table-column>
      <el-table-column prop="courseExamine.status" label="审核状态">
        <template slot-scope="scope">
          <span v-if="scope.row.courseExamine.status==0">
            待审核
          </span>
          <span v-if="scope.row.courseExamine.status==1">
            审核通过
          </span>
          <span v-if="scope.row.courseExamine.status==2">
            审核失败
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button @click="open(scope.row)">修改</el-button>
            <span v-if="scope.row.courseExamine.status==1">
              <el-button @click="auditCourse(scope.row)" disabled>审核</el-button>
            </span>
            <span v-else-if="scope.row.courseExamine.status==2">
              <el-button @click="auditCourse(scope.row)" disabled>审核</el-button>
            </span>
            <span v-else>
              <el-button @click="auditCourse(scope.row)">审核</el-button>
            </span>
          </template>
        </el-table-column>
    </el-table>

    <!--  分页  -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableDataS.current"
        :page-sizes="[1,10,15,20]"
        :page-size="tableDataS.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataS.total">
      </el-pagination>
    </div>

    <!--  修改弹出层   -->
    <el-dialog title="修改课程" :visible.sync="dialogVisible" width="30%">
      <span>
          <el-form label-width="80px" :model="inquire" ref="inquire">
            <el-form-item label="课程名称:">
              <el-input v-model="inquire.courseName"></el-input>
            </el-form-item>
            <el-form-item label="非会员:"
                          prop="coursePrice"
                          :rules="[{ required: true, message: '价格不能为空'},{ required: true, pattern: /^([0-9]{1,3})$/, message: '请输入正确的价格'}]">
              <el-input v-model="inquire.coursePrice" type="text"></el-input>
            </el-form-item>
             <el-form-item label="会员:"
                           prop="courseVprice"
                           :rules="[{ required: true, message: '价格不能为空'},{ required: true, pattern: /^([0-9]{1,3})$/, message: '请输入正确的价格'}]">
              <el-input v-model="inquire.courseVprice"></el-input>
            </el-form-item>
            <el-form-item label="排序:">
              <el-input-number v-model="inquire.ctSort" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="课程简介:">
              <el-input resize="none"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="inquire.courseJieshao">
              </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(inquire)">查询</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </span>
    </el-dialog>

    <!--  审核弹出层  -->
    <el-dialog title="审核" :visible.sync="courseVisible" width="30%">
        <span>
          <el-form :label-position="labelPosition" label-width="80px" :model="formCourseAlign">
            <el-form-item label="审核状态:">
              <el-radio-group v-model="formCourseAlign.status">
                    <el-radio label="1" >通过</el-radio>
                    <el-radio label="2" >不通过</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="备注:">
              <el-input resize="none"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="formCourseAlign.cRemarks">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitFormAudit(formCourseAlign)">确定</el-button>
              <el-button @click="courseVisible = false">取 消</el-button>
            </el-form-item>

          </el-form>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import  qs from "qs";
export default {
  data() {
    return {
      inquire: {
        kid:'',
        courseName:'',
        coursePrice:'',
        ctName:'',
        courseVprice:'',
        ctSort:'',
        courseJieshao:'',
        total:0,
        size:1,
        current:1,
      },
      textarea: '',
      textAudit:'',
      labelPosition: 'right',
      dialogVisible:false,
      courseVisible:false,
      value: true,
      formLabelAlign: {
        name: '1',
        region: '',
        type: '',
        resource:''
      },
      formCourseAlign:{
        kcId:'',
        status:'',
        cRemarks:''
      },
      person:{
        courseName:'',
        charge:''
      },
      tableData:[],
      tableDataS: {
        courseName:'',
        total:0,
        size:1,
        current:1,
      },
    }
  },
  created() {
    this.demand();
  },
  /**
   * 模糊查询，分页
   */
  methods: {
    demand(){
        this.$axios.post("courriculum-curriculumsTable/jiaoYu/course/queryAudit",qs.stringify(this.tableDataS)).then(r=>{
          this.tableData=r.data.records;
          this.tableDataS.total=r.data.total;
          this.tableDataS.total=r.data.total;
      })
    },
    submitFormAudit(){
      this.$axios.post("courriculum-curriculumsTable/jiaoYu/course-examine/check",qs.stringify(this.formCourseAlign))
    },
    /**
     * 修改
     */
    submitForm(){
      this.$axios.post("courriculum-curriculumsTable/jiaoYu/course/modification",qs.stringify(this.inquire)).then(r => {
        if (r.data==1){
          this.$message({
            type:'success',
            message:"修改成功！",
          })
        }
        this.dialogVisible=false;
        this.demand();
      })
    },
    handleChange(value) {
      console.log(value);
    },
    onSubmit() {

      this.demand()
    },
    resetForm(tableDataS) {
      this.$refs[tableDataS].resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tableDataS.size=val
      this.demand()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tableDataS.current=val
      this.demand()
    },
    auditCourse(a){
      this.formCourseAlign.kcId=a.courseExamine.kcId
      this.formCourseAlign.status=a.courseExamine.status,
      this.formCourseAlign.cRemarks=a.courseExamine.cremarks,
      this.courseVisible=true;
    },
    open(a) {
      this.inquire.courseTypeId=a.courseTypeId
      this.inquire.ctId=a.courseType.ctId
      this.inquire.ctName=a.courseType.ctName
      this.inquire.kid=a.kid                        //主键
      this.inquire.courseName=a.courseName  //名字
      this.inquire.coursePrice=a.coursePrice//非会员
      this.inquire.courseVprice=a.courseVprice//会员
      this.inquire.ctSort=a.courseType.ctSort//排序
      this.inquire.courseJieshao=a.courseJieshao//课程介绍
      this.dialogVisible=true;
    },
  }
}
</script>

<style scoped>

</style>
